.purchase-item.card {
	&.is-expired {
		background: $gray-light;

		.purchase-item__title,
		.purchase-item__purchase-type {
			opacity: 0.6;
		}
	}

	&.is-included-with-plan {
		// TODO
	}
}

.purchase-item.is-placeholder {
	padding: 16px 24px;

	.purchase-item__title,
	.purchase-item__purchase-date,
	.purchase-item__purchase-type {
		@include placeholder( 23% );
	}

	.purchase-item__purchase-date {
		width: 40%;
	}

	.purchase-item__purchase-type {
		width: 30%;
	}

	.purchase-item__title {
		width: 60%;
	}
}

.purchase-item__purchase-date,
.purchase-item__purchase-type {
	line-height: 14px;
	margin-top: 2px;
}

.purchase-item__title {
	color: $gray-dark;
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2em;
	margin: 2px 20px 2px 0;
	overflow: hidden;
	position: relative;
	white-space: nowrap;

	&:after:not( .is-placeholder ) {
		@include long-content-fade();
	}

	@include breakpoint( ">480px" ) {
		font-family: $serif;
		font-size: 18px;
		font-weight: 700;
		max-width: none;
	}
}

.purchase-item__purchase-type {
	color: $gray;
	font-size: 11px;
	margin: 0 0 2px;
	overflow: hidden;
	text-overflow: ellipsis;

	@include breakpoint( ">480px" ) {
		text-transform: uppercase;
	}
}

.purchase-item__purchase-date {
	color: darken( $gray, 20% );
	font-size: 13px;
}
